<template>
    <div class="person" :class="{'person-active': loginStore.isLoggedIn === true}">
      <div class="top">
        <div class="intro-card">
          <div class="avartar">
            <img src="https://img.js.design/assets/img/67ebefb56cfd1689b9abfccc.jpg#68477592e8bac6fd5bf74b47729833ab" v-if="loginStore.isLoggedIn"/>
            <img src="@/assets/personal/default-avartar.png" v-else/>
          </div>
          <div class="name">艾小蓓</div>
          <div class="details">
            <div class="up">
              <div class="status">高级教师</div>
              <div class="subject">·数学</div>
            </div>
            <div class="down">福州市第一中学</div>
          </div>
          <el-button plain color="#B9A3FF" style="margin-top: 5px;" @click="editPersonal">编辑个人资料</el-button>
        </div>
        <div v-for="item in funcArr" :key="item.id" v-if="loginStore.isLoggedIn">
          <Item :title="item.title" :nums="item.nums" :icon="item.icon"></Item>
        </div>
        <div v-for="(item,index) in funcArr" :key="index" v-else>
          <Item :title="item.title" :nums="'暂无'" :icon="item.icon"></Item>
        </div>
      </div>
      <div class="under">
        <div class="title">备课历史</div>
        <div class="history" :class="{'history-unactive': loginStore.isLoggedIn === false}">
          <div class="board" style="overflow: auto;">
             <HistoryItem v-for="item in historylist" :key="item.id" :title="item.text" v-if="loginStore.isLoggedIn"></HistoryItem>
             <div class="no-more" v-else>暂无更多备课记录</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-title">对话记录</div>
        <div class="no-chat" v-if="!loginStore.isLoggedIn">暂无更多AI对话记录</div>
        <div class="chat-history" v-else>
          <div class="chat-item" v-for="item in chatlist" :key="item.id">
            <img :src="item.img" alt="图片" class="chat-img"/>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { funcArr } from './components/funcArray';
import { chatlist, historylist } from './components/chat-item/chatList';
import { useLoginStore } from '@/stores/login';
import Item from '@/views/personal/components/items/index.vue'
import HistoryItem from '@/views/personal/components/history-items/index.vue'
const loginStore = useLoginStore()
const router = useRouter()
function editPersonal(){
  if(!loginStore.isLoggedIn){
    router.push('/login/account')
  }else{
    router.push('/personal-details')
  }
}
</script>

<style scoped lang="less">
@import url('@/views/personal/index.less');
</style>